import React, { useState, useEffect } from 'react'
import api from '../../api'
import '../../assets/css/users.scss'
import { useNavigate } from 'react-router-dom'
export default function User() {
  const [users, setUsers] = useState([])
  useEffect(() => {
    getAccountList()
  }, [])

  const nav = useNavigate()
  const getAccountList = async () => {
    let result = await api.users.getAccountList()
    setUsers(result.data)
  }
  //进入详情组件的方法
  const goUserDetail = (id) => {
    nav(`/home/udetail?id=${id}`)
  }

  const goUserInfo = (id) => {
    nav(`/home/uinfo/${id}`)
  }
  return (
      <div className='ucontainer'>
        <table>
          <thead>
            <tr>
              <td>序号</td>
              <td>账户</td>
              <td>邮箱</td>
              <td>头像</td>
              <td>角色</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            {
              users.map((item, index) => <tr key={item._id}>
                <td><input type="checkbox" /></td>
                <td>{item.account}</td>
                <td>{item.email}</td>
                <td><img src={item.imgUrl ? item.imgUrl : 'https://img95.699pic.com/xsj/1r/f5/h4.jpg%21/fh/300'} alt="" className='avatar' /></td>
                <td>{item.role ? item.role.authUser : '暂无'}</td>
                <td>{item.state ? '正常' : '失效'}</td>
                <td>
                  <button onClick={() => { goUserDetail(item._id) }}>查看</button>
                  <button onClick={() => { goUserInfo(item._id) }}>查看2</button>
                </td>
              </tr>)
            }
          </tbody>
        </table>
    </div>
  )
}
